<template>
    <div class="comments">
       <div class="top">
           <h2>挂号详情</h2>
       </div>
       <div class="alls">
            <div class="alltop">
                <div class="topmsg">
                    <p>患者信息</p>
                </div>
                <div class="topintro">
                    <div class="introleft">
                        <el-descriptions class="margin-top" :column="2"  :labelStyle="{color:'#aaa',margin:'0 15px 10px 0'}">
                        <el-descriptions-item label="患者名">kooriookami</el-descriptions-item>
                        <el-descriptions-item label="就诊卡号">18100000000</el-descriptions-item>
                        <el-descriptions-item label="证件类型">苏州市</el-descriptions-item>
                        <el-descriptions-item label="证件号码">12345654345566</el-descriptions-item>
                        <el-descriptions-item label="微信昵称">你好你好</el-descriptions-item>
                        <el-descriptions-item label="手机号码">12345678900</el-descriptions-item>
                        <el-descriptions-item label="就诊人地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="introright">
                        <el-descriptions class="margin-top" :column="1"  :labelStyle="{color:'#aaa',alignItems:'center',margin:'0 15px 10px 0'}">
                            <el-descriptions-item label="患者头像">
                                <template >
                                    <img class="people" src="https://img0.baidu.com/it/u=1680211987,3226208401&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475" alt="">
                                </template>
                            </el-descriptions-item>
                        <el-descriptions-item label="关系">本人</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>
            </div>
            <div class="alldown">
                <div class="topmsg">
                    <p>预约信息</p>
                </div>
                <div class="box">
                    <div class="bigbox">
                    <el-descriptions class="margin-top" :column="3"  :labelStyle="{color:'#aaa',margin:'0 15px 10px 0'}">
                        <el-descriptions-item label="就诊医院">北京市第一人民医院</el-descriptions-item>
                        <el-descriptions-item label="医院地址">北京市xxxxxxxx</el-descriptions-item>
                        <el-descriptions-item label="就诊科室">消化内科xxx</el-descriptions-item>
                        <el-descriptions-item label="医生职称">主任医师</el-descriptions-item>
                        <el-descriptions-item label="挂号类型">专家号</el-descriptions-item>
                        <el-descriptions-item label="就诊医生">xxx</el-descriptions-item>
                        <el-descriptions-item label="门诊时间">2019-9-8 12:30 周一 上午</el-descriptions-item>
                        <el-descriptions-item label="候诊时间">9:30</el-descriptions-item>
                        <el-descriptions-item label="挂号费">60.00</el-descriptions-item>
                        <el-descriptions-item label="预约时间">2019-9-8 10:09:39</el-descriptions-item>
                        <el-descriptions-item label="就诊状态">9:30</el-descriptions-item>
                        <el-descriptions-item label="取消原因">小程序操作</el-descriptions-item>
                        <el-descriptions-item label="取消时间">2019-9-8 10:09:39</el-descriptions-item>
                    </el-descriptions>
                        
                    <div class="get">
                        <div class="getipt">
                            <p>挂号备注:</p>
                            <input id="ipt" type="text" placeholder="请输入内容">
                        </div>
                        <div class="up">
                            <p @click="getyes" class="upyes">保存</p>
                            <p @click="getno" class="upno">取消</p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
 <script>
 
 export default {
   name: 'NumberDetail',
   components:{},
    data () {
        return {

        }
    },
   methods: {
        getyes(){
            if(this.$route.name!='number'){
                alert('保存成功')
				this.$router.push('/number')
			}
        },
        getno(){
            if(this.$route.name!='number'){
				this.$router.push('/number')
			}
        },

   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .coments{
   padding: 0 0 0 10px;
   box-sizing: border-box;
 }
 .top{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
 }
h2{
   height: 30px;
   line-height: 30px;
   font-weight: 400;
   font-style: normal;
   font-size: 18px;
   margin-left: 30px;
}
h2::after{
   content: '';
   border-width: 0px;
   position: absolute;
   left: 0px;
   top:12px;
   width: 24px;
   height: 8px;
   border-radius: 10px;
   background-color: #006EFF;
}
.alls{
    margin-top: 20px;
}
.alltop{
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
.topmsg{
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #006EFF;
    height: 50px;
    line-height: 50px;
    background-color: rgba(242, 242, 242, 1);
}
.topmsg p{
    margin-left: 20px;
}
/* ::v-deep [data-v-16a27f79] .el-descriptions-item__container {
    display: flex;
    align-items: center;
} */
.topintro{
    display: flex;
    padding: 20px;
    box-sizing: border-box;
}
/* .introright{
    text-align: center;
} */
.people{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.alldown{
    width: 100%;
    height:auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
.box{
    padding: 20px;
    box-sizing: border-box;
}
.getipt{
    display: flex;
    align-items: center;
}
.getipt p{
    font-size: 14px;
    color: #aaa;
    margin:0 15px 10px 0
}
#ipt{
    width: 420px;
    height: 30px;
    outline: none;
    color: #aaa;
    border-color: #409EFF;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
}
#ipt:focus {
    background-color: #ffffff; 
    border-color: #007bff; 
    outline: none; 
}
.up{
    display: flex;
    margin: 25px 0 20px 77px;
}
.upyes{
    padding:7px 35px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #007bff;
    color: #ffffff;
    font-size: 14px;
}
.upno{
    margin-left: 20px;
    padding: 7px 35px;
    border-radius: 5px;
    box-sizing: border-box;
    color: #006EFF;
    background-color: rgba(0, 110, 255, 0.0980392156862745);
    font-size: 14px;
}
.upno:hover{
    background-color: #007bff;
    color: #ffffff;
}
</style>